<style lang="less">
@import '../style.less';
</style>
<template>
    <div class="material">
        <div class="op-header">
            <el-button class="add"
                       type="info"
                       @click="addMedia">
                <i class="el-icon-circle-plus icon-right" />新增素材
            </el-button>
            <div class="search">
                <el-select class="enable-select"
                           v-model="currentMediaType"
                           @change="meidaTypeChange"
                           placeholder="媒体类型">
                    <el-option label="图片"
                               value="image" />
                    <el-option label="视频"
                               value="video" />
                    <el-option label="音频"
                               value="audio" />
                </el-select>
                <el-cascader class="class-select"
                             :clearable="true"
                             :show-all-levels="false"
                             change-on-select
                             :options="mediaClasses"
                             :props="{ value: 'id', label: 'name', children: 'subClasses' }"
                             v-model="classIds"
                             placeholder="全部分类" />
                <el-input class="search-input "
                          v-model="name"
                          placeholder="请输入查询关键字"
                          prefix-icon="el-icon-search" />
                <el-button class="search-button"
                           type="primary"
                           @click="searchMedias">
                    <i class="el-icon-search icon-right" />查询
                </el-button>
            </div>
        </div>
        <table-ex :rows="medias"
                  :total="mediaTotal"
                  :columns="columns"
                  :options="options"
                  :on-option="onClickOption"
                  :on-operation="onClickOperation"
                  :on-page-change="onPageChange" />
        <dialog-ex v-if="dialogMode"
                   :title="dialogMode === 'add'
                    ? `新增素材${getMediaTypeLabel(currentMediaType)}`
                    : `编辑素材${getMediaTypeLabel(currentMediaType)}`"
                   :mode="dialogMode"
                   :form="form"
                   :ctrl-values="{ classIds: this.mediaClasses }"
                   :init="currentMedia" />
    </div>
</template>

<script>
    import Vue from 'vue'
    import { mapGetters, mapActions, mapMutations } from 'vuex'
    import dialogEx from '@/components/dialog/dialogEx'
    import tableEx from '@/components/table/tableEx'
    import pageConfig from '../config'

    export default {
        name: 'media',
        components: {
            'table-ex': tableEx,
            'dialog-ex': dialogEx
        },
        data() {
            return {
                name: '',
                currentMediaType: 'image',
                classIds: [],
                currentMedia: null,
                dialogMode: null,
                columns: pageConfig.media.columns,
                options: pageConfig.media.options,
                form: {
                    mediaType: 'image',
                    items: pageConfig.media.formItems,
                    default: {},
                    actions: {
                        cancel: () => (this.dialogMode = null),
                        confirm: (data, mode) => {
                            this.onConfirm(data, mode)
                            this.dialogMode = null
                        },
                        uploadSuccess: res => (this.currentMedia = res),
                        formItemVisible: formItem => this.formItemVisible(formItem)
                    }
                }
            }
        },
        computed: {
            ...mapGetters(['mediaClasses', 'medias', 'mediaTotal'])
        },
        mounted() {
            this.loadInitData()
        },
        methods: {
            ...mapActions(['getMediaClasses', 'getMedias', 'saveMedia', 'removeMedia']),
            ...mapMutations(['setMediaPage']),
            getMediaTypeLabel(type) {
              if(type === 'video')  {
                  return "视频"
              }
              if(type === 'image') {
                  return "图片"
              }
              if(type === 'audio') {
                  return "音频"
              }
            },
            loadInitData() {
                this.getMediaClasses()
                this.getMedias({ type: this.currentMediaType })
            },
            meidaTypeChange(value) {
                this.currentMediaType = value
                Vue.set(this.form, 'mediaType', value)
                this.getMedias({ type: this.currentMediaType })
            },
            formItemVisible(formItem) {
                if (!this.currentMedia && formItem.name === 'media-upload') {
                    return true
                } else if (
                    this.currentMedia &&
                    this.currentMedia.fileUrl &&
                    formItem.prop !== 'media-upload'
                ) {
                    return true
                }
                return false
            },
            addMedia() {
                this.dialogMode = 'add'
                this.currentMedia = null
            },
            searchMedias() {
                this.setMediaPage({
                    number: 1,
                    filter: { name: this.name, classIds: this.classIds }
                })
                this.getMedias({ type: this.currentMediaType })
            },
            batchOption() {},
            onClickOption(option, rows) {
                if (option === 'refresh') {
                    this.loadInitData()
                }
            },
            onClickOperation(oper, row) {
                if (oper.prop === 'edit') {
                    this.currentMedia = row
                    this.dialogMode = 'edit'
                } else if (oper.prop === 'delete') {
                    this.removeMedia({ type: this.currentMediaType, id: row.id })
                } else if (oper.prop === 'eviden-edit') {
                    this.currentMedia = row
                    this.editorMode = 'edit'
                } else {
                }
            },
            onPageChange(number) {
                this.setMediaPage({ number })
                this.getMedias({ type: this.currentMediaType })
            },
            onConfirm(data, mode) {
                this.saveMedia({ type: this.currentMediaType, data })
            }
        }
    }
</script>
